import { useEffect } from "react";
import { Space, Divider, Table, Popconfirm, Tag, message } from "antd";
import { Card as SemiCard, Button } from "@douyinfe/semi-ui";
import { IconPlusCircle } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import { AllAdministrators, ChangeAdministratorStatus, RemoveAdministrator } from "../../_graphql/public";

import AddAdministartorModal from "../../components/administrator/add";

const { Column } = Table;

const AdministratorPage = () => {
    const { windowInnerHeight, graphqlFetchPlatform } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");

    const state = useReactive({
        loading: false,
        submitLoading: false,
        administrators: [],
    });

    const loadData = async () => {
        state.loading = true;
        let res = await graphqlFetchPlatform({ query: AllAdministrators, variables: {} });
        state.administrators = res?.a?.nodes || [];
        state.loading = false;
    };

    useEffect(() => {
        loadData();
    }, []);

    const handleChangeStatus = async (record) => {
        state.submitLoading = true;
        let res = await graphqlFetchPlatform({
            query: ChangeAdministratorStatus,
            variables: {
                identityCardNumber: record.identityCardNumber,
                verifyStatus: !record.verifyStatus,
            },
        });
        if (res) {
            message.success("成功更改管理员状态");
            loadData();
        }
        state.submitLoading = false;
    };

    const addAdministartor = () => {
        setModalTitle("添加管理员");
        setModalVisible(true);
        setModalWidth(500);
        setModalComponent(<AddAdministartorModal reloadData={loadData} persons={state.administrators} />);
    };

    const handleRemove = async (record) => {
        state.submitLoading = true;
        let res = await graphqlFetchPlatform({
            query: RemoveAdministrator,
            variables: { identityCardNumber: record.identityCardNumber },
        });
        if (res) {
            message.success("成功移除管理员信息");
            loadData();
        }
        state.submitLoading = false;
    };

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>管理人员列表</span>}
                headerExtraContent={
                    <Space split={<Divider type="vertical" />} size={4}>
                        <Button icon={<IconPlusCircle />} onClick={addAdministartor}>
                            添加管理员
                        </Button>
                    </Space>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight, overflow: "auto" }}
            >
                <Table loading={state.loading} dataSource={state.administrators} rowKey="identityCardNumber" bordered size="small" pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
                    <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Column title="姓名" dataIndex="realName" align="left" />
                    <Column title="身份证号码" dataIndex="identityCardNumber" align="center" width={180} />
                    <Column title="系统默认?" dataIndex="isSystem" align="center" width={120} render={(_, r, i) => (_ ? "是" : "否")} />
                    <Column
                        title="审核状态"
                        dataIndex="verifyStatus"
                        align="center"
                        width={100}
                        render={(_, r) =>
                            !r.isSystem && (
                                <Popconfirm title={`确认要改变审核状态吗?`} placement="topRight" okButtonProps={{ loading: state.submitLoading }} onConfirm={() => handleChangeStatus(r)}>
                                    {_ ? <Tag color="#87d068">已审核</Tag> : <Tag color="#f50">待审核</Tag>}
                                </Popconfirm>
                            )
                        }
                    />
                    <Column
                        title="操作"
                        dataIndex="verifyStatus"
                        align="center"
                        width={100}
                        render={(_, r) =>
                            r.isSystem ? (
                                ""
                            ) : (
                                <Popconfirm title={`确认要移除该管理员吗?`} placement="topRight" okButtonProps={{ loading: state.submitLoading }} onConfirm={() => handleRemove(r)}>
                                    <a>移除</a>
                                </Popconfirm>
                            )
                        }
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default AdministratorPage;
